<!--
 * @Author: jhw
 * @Date: 2025-08-13 12:54:20
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:51:43
 * @Description:
-->
<template>
  <div
    :class="{
      'text-center': computedStatus.position,
    }"
  >
    <MaterialsHeader :serialNum="serialNum" v-bind="computedStatus" />
    <el-rate
      v-model="rateValue"
      size="large"
      @change="emitAnswer"
      clearable
      :texts="computedStatus.options"
      :show-text="status.options?.isUse"
    />
  </div>
</template>

<script setup lang="ts">
import MaterialsHeader from '@/components/SurveyComs/Common/MaterialsHeader.vue';
import { SurveyComNameEnum, type OptionsStatus } from '@/types';
import {
  getCurrentStatus,
  getStringStatus,
  getStringStatusByCurrentStatus,
  getTextStatus,
} from '@/utils';
import { computed, ref } from 'vue';

const emit = defineEmits(['updateAnswer']);

const props = defineProps<{
  componentId: string;
  status: OptionsStatus;
  serialNum: number;
}>();

const rateValue = ref(3);

const computedStatus = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  options: getStringStatus(props.status.options),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));

const emitAnswer = () => {
  emit('updateAnswer', {
    serialNum: props.serialNum,
    title: computedStatus.value.title,
    answer: rateValue.value,
    type: SurveyComNameEnum.personalInfoScore,
    componentId: props.componentId,
  });
};
</script>

<style scoped></style>
